<template>
	<view class="">
		<view class="tabbar tn-bg-white">
			<!-- 粒子漂浮 -->
			<div class="">
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>

				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>

				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>

				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
			</div>
			<!-- tabbar -->
			<view class="action" v-for="(item,index) in tabList" :key="index" @tap.stop="changeTabbar(index)">
				<view class="bar-icon">
					<image class="" :src="elIcon(index)">
					</image>
				</view>
				<view class="" :class="[value === index ? 'tn-color-orange' : 'tn-color-gray']">{{item.title}}</view>
			</view>
		</view>
		<!-- 防止tabbar塌陷 -->
		<view class="tn-tabbar__placeholder tn-safe-area-inset-bottom" :style="{height: `calc(${height}rpx)`}"></view>
		<!-- 波浪 -->
		<view class="tnwave waveAnimation">
			<view class="waveWrapperInner bgTop">
				<view class="wave waveTop"
					style="background-image: url('https://mp-3ad318f6-bda9-4e5c-9962-7e028b4b8932.cdn.bspapp.com/images/wave-2.png')">
				</view>
			</view>
			<view class="waveWrapperInner bgMiddle">
				<view class="wave waveMiddle"
					style="background-image: url('https://mp-3ad318f6-bda9-4e5c-9962-7e028b4b8932.cdn.bspapp.com/images/wave-2.png')">
				</view>
			</view>
			<view class="waveWrapperInner bgBottom">
				<view class="wave waveBottom"
					style="background-image: url('https://mp-3ad318f6-bda9-4e5c-9962-7e028b4b8932.cdn.bspapp.com/images/wave-1.png')">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 绑定当前被选中的current值
			value: {
				type: [String, Number],
				default: 0
			},
			// 高度，单位rpx
			height: {
				type: Number,
				default: 160
			},
		},
		data() {
			return {
				tabList: [{
						title: '首页',
						pagePath: "/pages/index/index",
						inactiveIcon: '/static/image/tabBar/icon_home1.png',
						activeIcon: '/static/image/tabBar/icon_home2.png'
					},
					{
						title: '项目',
						pagePath: "/pages/index/project",
						inactiveIcon: '/static/image/tabBar/icon_project1.png',
						activeIcon: '/static/image/tabBar/icon_project2.png'
					},
					{
						title: '联系',
						pagePath: "/pages/index/user",
						inactiveIcon: '/static/image/tabBar/icon_user1.png',
						activeIcon: '/static/image/tabBar/icon_user2.png'
					}
				]
			}
		},
		computed: {
			// 当前的图标
			elIcon() {
				return (index) => {
					let currentItem = this.tabList[index]
					if (index === this.value) {
						return currentItem['activeIcon']
					} else {
						return currentItem['inactiveIcon']
					}
				}
			},
		},
		methods: {
			changeTabbar(index) {
				let currentItem = this.tabList[index]
				if (index === this.value) return;
				uni.switchTab({
					url: currentItem.pagePath
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 波浪*/
	.template-outset {
		// background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
		width: 100vw;
		height: 100vh;
	}

	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: fixed;
		left: 0;
		right: 0;
		// bottom: 100rpx;
		bottom: calc(50rpx + constant(safe-area-inset-bottom));
		bottom: calc(50rpx + env(safe-area-inset-bottom));
		// top: 0;
		z-index: 997;
		margin: auto;
		height: 90rpx;
		// background-color: chartreuse;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}


	.bgTop {
		opacity: 0.4;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.6;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.95;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}


	@for $i from 0 through 20 {
		.g-bubble:nth-child(#{$i}) {
			opacity: 0.2;
			border-radius: 100%;
			position: fixed;
			background: #26b4f5;
			$width: random(20)+px;
			right: #{(random(100)) + '%'};
			bottom: - #{(random(60))}px;
			width: $width;
			height: $width;
			animation: moveToTop #{(random(9500) + 1500) / 1000}s ease-in-out -#{random(9000)/1000}s infinite;
		}
	}

	@keyframes moveToTop {
		70% {
			opacity: 0.05;
		}

		100% {
			opacity: 0.01;
			transform: translate(-50%, -180px) scale(0.3);
		}
	}




	// .index {
	//  width: 100%;
	//  height: 100vh;
	//  position: relative;

	.custom-tabbar-page {
		width: 100%;
		// height: calc(100vh - 110rpx);
		height: 100vh;
		box-sizing: border-box;
		padding-bottom: 0rpx;
		padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	}


	/* 底部导航 statr */
	.tabbar {
		width: 100%;
		height: 45rpx;
		height: calc(45rpx + constant(safe-area-inset-bottom));
		height: calc(45rpx + env(safe-area-inset-bottom));
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		background-color: transparent;
		z-index: 998;
		padding-bottom: calc(65rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(65rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		// box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);

		.action {
			font-size: 22rpx;
			position: relative;
			flex: 1;
			text-align: center;
			padding: 0;
			display: block;
			height: auto;
			line-height: 1;
			margin: 0;
			overflow: initial;

			.bar-icon {
				width: 100rpx;
				position: relative;
				display: block;
				height: auto;
				margin: 0 auto 10rpx;
				text-align: center;
				font-size: 42rpx;

				image {
					width: 55rpx;
					height: 55rpx;
					display: inline-block;
				}
			}

			.bar-circle {
				position: relative;
				display: block;
				margin: 0rpx auto 0rpx;
				text-align: center;
				font-size: 52rpx;
				line-height: 90rpx;
				width: 100rpx !important;
				height: 100rpx !important;
				overflow: hidden;

				image {
					width: 100rpx;
					height: 100rpx;
					display: inline-block;
					margin: 0rpx auto 0rpx;
				}
			}
		}

		.bar-center {
			animation: suspension 3s ease-in-out infinite;

			.nav-index-button {
				animation: suspension 3s ease-in-out infinite;
				z-index: 999999;


				&__content {
					position: absolute;
					width: 100rpx;
					height: 100rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					&--icon {
						width: 100rpx;
						height: 100rpx;
						font-size: 60rpx;
						border-radius: 50%;
						margin-bottom: 18rpx;
						position: relative;
						z-index: 1;
						transform: scale(0.85);

						&::after {
							content: " ";
							position: absolute;
							z-index: -1;
							width: 100%;
							height: 100%;
							left: 0;
							bottom: 0;
							border-radius: inherit;
							opacity: 1;
							transform: scale(1, 1);
							background-size: 100% 100%;
							// background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
						}
					}
				}

				&__meteor {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 100rpx;
					height: 100rpx;
					transform-style: preserve-3d;
					transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);

					&__wrapper {
						width: 100rpx;
						height: 100rpx;
						transform-style: preserve-3d;
						animation: spin 20s linear infinite;
					}

					&__item {
						position: absolute;
						width: 100rpx;
						height: 100rpx;
						border-radius: 1000rpx;
						left: 0;
						top: 0;

						&--pic {
							display: block;
							width: 100%;
							height: 100%;
							background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc3.png) no-repeat center center;
							background-size: 100% 100%;
							animation: arc 4s linear infinite;
						}
					}
				}
			}
		}
	}

	/* 底部导航 end */
	// }

	@keyframes suspension {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-0.6rem);
		}
	}

	@keyframes spin {
		0% {
			transform: rotateX(0deg);
		}

		100% {
			transform: rotateX(-360deg);
		}
	}

	@keyframes arc {
		to {
			transform: rotate(360deg);
		}
	}


	/* 新*/
	/* 按钮 */
	.button-1 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
	    right: 20rpx; */
		bottom: 24%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	.button-2 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
	    right: 20rpx; */
		bottom: 15%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;

			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}
</style>